<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- jquery -->
    <script src="../frame/semanticUI/jquery.min.js"></script>
    <!-- CDN引入semanticUI框架 -->
    <link rel="stylesheet" type="text/css" href="../frame/semanticUI/UI-master/semantic.min.css">
    <!-- semanticUI依赖于Jquery -->
    <script src="../frame/semanticUI/UI-master/semantic.min.js"></script>
    <!-- 内容排版插件 -->
    <link rel="stylesheet" href="../plugin/typesetting/typo.css">
    <!-- 引入动画插件 -->
    <link rel="stylesheet" href="../plugin/animate/animate.css_4.1.1_animate.css"/>
    <!-- 目录生成插件 -->
    <link rel="stylesheet" href="../plugin/catelogue/tocbot.css">
    <script src="../plugin/catelogue/tocbot.min.js"></script>
    <!-- 平滑滚动插件 -->
    <script src="../plugin/scrollto/jquery.scrollTo.min.js"></script>

    <link rel="stylesheet" href="../frame/elementUI/lib-master/theme-chalk/index.css"/>
    <!-- 必须先引入vue，  后使用element-ui -->
    <script src="../frame/elementUI/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="../frame/elementUI/lib-master/index.js"></script>

    <!-- editormd -->
    <link rel="stylesheet" href="../plugin/editormd/css/editormd.preview.css">

    <script src="../plugin/editormd/lib/marked.min.js"></script>
    <script src="../plugin/editormd/lib/prettify.min.js"></script>
    <script src="../plugin/editormd/lib/raphael.min.js"></script>
    <script src="../plugin/editormd/lib/underscore.min.js"></script>
    <script src="../plugin/editormd/lib/sequence-diagram.min.js"></script>
    <script src="../plugin/editormd/lib/flowchart.min.js"></script>
    <script src="../plugin/editormd/lib/jquery.flowchart.min.js"></script>
    <script src="../plugin/editormd/js/editormd.js"></script>

    <!-- 自定义的CSS -->
    <link rel="stylesheet" href="../css/blog.css">
    <title>详情页</title>

</head>

    <script>
        $(function () {
            $('#payButton').popup({
                popup: $('#payment'),
                on: 'click',
                position: 'bottom center'
            });
            //目录初始化
            tocbot.init({
                tocSelector: '.js-toc',  //指定生成的目录地方
                contentSelector: '#content',
                headingSelector: 'h1, h2, h3',  //生成的标题级别
            });
            //弹出目录
            $('#cateBut').popup({
                popup: $('#cate'),
                on: 'click',
                position: 'right center'
            });
            //平滑滚动的设置
            $('#toTopBut').click(function () {
                $(window).scrollTo(0,500);
            });
            //搜索框按键事件
            $('#searchInput').keydown(function () {
                if(event.keyCode==13){
                    axios({
                        method: "GET",
                        url: "/other/search",
                        params:{
                            query: $('#searchInput').val()  //搜索内容
                        },
                    }).then((res)=>{
                        location.href = "search.html";
                    });
                }
            });
            axios({
                method: "GET",
                url: "/other/gainBlog",
            }).then((res)=>{
                console.log(res.data);
                $("#content").html('<textarea id="appendTest" style="display:none;"></textarea>');
                var str=res.data.content;
                $("#appendTest").val(str);
                //文章内容转换
                editormd.markdownToHTML("content", {
                    htmlDecode: "style,script,iframe", //可以过滤标签解码
                    emoji: true,
                    taskList:true,
                    tex: true,               // 默认不解析
                    flowChart:true,         // 默认不解析
                    sequenceDiagram:true,  // 默认不解析
                });
            });
            //登录下拉菜单
            $(".ui.dropdown").dropdown({
                allowAdditions: true //允许添加新的菜单项
            });
        });
    </script>
<body>
<div id="app">
    <!-- 导航 -->
    <nav class="ui inverted vertical masthead center aligned segment" style="padding-top: 5px;height: 70px">
        <div class="ui container">
            <!-- 主菜单 -->
            <div class="ui large secondary inverted pointing menu">
                <a class="item" href="index.html" ><i class="home icon"></i>首页</a>
                <a class="item" href="types.html" ><i class="idea icon"></i>分类</a>
                <a class="item" href="archives.html" ><i class="clone icon"></i>归档</a>
                <a class="item" href="tags.html" ><i class="tags icon"></i>标签</a>
                <a class="item" href="about.html" ><i class="info icon"></i>关于站长</a>
                <div class="right item" style="margin-top: 7px">
                    <div class="ui icon input">
                        <input type="text" v-model="searchInput.query" placeholder="搜索....." style="width: 300px" id="searchInput">
                        <i @click="submitQuery()" class="search link icon"></i>
                    </div>
                </div>
                <!-- 登录 -->
                <div class="ui right floated dropdown item" style="margin-top: 7px;float: right">
                    <div class="text">
                        <img v-bind:src="visitor.avatar" class="ui avatar image" style="width: 30%">
                        <strong >{{visitor.username}}</strong>
                    </div>
                    <i class="ui dropdown icon"></i>
                    <div class="menu">
                        <a href="visitorLogin.html" class="item" v-if="visitor.id==null">登录</a>
                        <a href="visitorLogin.html" class="item" v-if="visitor.id!=null">切换账号</a>
                        <a @click="logout()" class="item">注销</a>
                    </div>
                </div>

            </div>
        </div>
    </nav>

    <!-- 中间内容 -->
    <div style="padding-top: 40px;" class="animate__animated animate__fadeIn">
        <div class="ui container" style="width: 1000px">
            <div class="ui container">
                <!-- 头部 -->
                <div class="ui top attached segment">
                    <div class="ui horizontal link list">
                        <div class="item">
                            <img :src="oneBlog.user.avatar" alt="" class="ui avatar image">  <!-- 头像 -->
                            <div class="content"><a class="header" href="#">{{oneBlog.user.username}}</a></div>
                        </div>
                        <div class="item">
                            <i class="calendar icon"></i>{{oneBlog.updateTime}}
                        </div>
                        <div class="item">
                            <i class="eye icon"></i>{{oneBlog.views}}
                        </div>
                    </div>
                </div>
                <!-- 图片区域 -->
                <div class="ui attached segment">
                    <img :src="oneBlog.firstPicture" alt="" class="ui fluid rounded image" style="height: 450px">
                </div>
                <!-- 文章内容 -->
                <div id="centerText" class="ui attached segment">
                    <div class="ui right aligned basic segment">
                        <div class="ui orange basic label">原创</div>
                    </div>
                    <!-- 标题 -->
                    <h2 class="ui center aligned header" id="context" style="font-size: 40px">{{oneBlog.title}}</h2>
                    <br>
                    <!-- 具体内容 -->
                    <div id="content" class="typo typo-selection" style="border: 2px">

                    </div>
                    <!-- 标签 -->
                    <div class="" style="margin-top: 20px">
                        <div class="ui basic teal left pointing label" v-for="tag of oneBlog.tagList">{{tag.name}}</div>
                    </div>
                    <!-- 赞赏 -->
                    <div class="ui center aligned basic segment">
                        <button class="ui orange basic circular button" id="payButton" :disabled="oneBlog.appreciation==false">赞赏</button>
                    </div>
                    <div class="ui flowing popup transition hidden" id="payment">
                        <div class="ui orange basic label">
                            <div class="ui images" style="font-size: inherit !important;">
                                <div class="image">
                                    <img src="../image/zhifubao.jpg" alt="" class="ui rounded bordered image" style="width: 120px">
                                    <div>支付宝</div>
                                </div>
                                <div class="image">
                                    <img src="../image/weixin.jpg"  alt="" class="ui rounded bordered image" style="width: 120px">
                                    <div>支付宝</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 博客信息 -->
                <div class="ui attached positive segment">
                    <div class="ui middle aligned grid">
                        <div class="eleven wide column">
                            <ul class="list">
                                <li>作者：{{oneBlog.user.username}}</li>
                                <li>发表时间：{{oneBlog.updateTime}}</li>
                                <li>版权声明：自由转载-非商用-非衍生（创建共享3.0许可证）</li>
                                <li>公众号转载：请在文末添加作者公众号二维码</li>
                            </ul>
                        </div>
                        <div class="five wide column">
                            <img src="../image/mybibi.jpg" alt="" class="ui right floated rounded bordered image" style="width: 150px">
                        </div>
                    </div>
                </div>
                <!-- 留言区域 -->
                <div class="ui bottom attached positive segment" id="comment-container">
                    <!-- 评论提交区 -->
                    <div>
                        <el-form class="demo-form-inline" ref="form" :model="form" :rules="rules" >
                            <el-form-item prop="textarea" >
                                <el-input type="text" v-model="form.textarea" :placeholder="form.placeholder" autocomplete="off" id="elInput1">
                                    <el-button slot="append" type="primary" @click="saveComment()" icon="el-icon-edit">发帖</el-button>
                                </el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <!-- 评论区 -->
                    <div class="ui teal segment" >
                        <div class="ui comments">
                            <h3 class="ui dividing header">评论</h3>
                            <div class="comment" v-for="comment of comments" v-if="comment!=null">
                                <a class="avatar">
                                    <img :src="comment.avatar">
                                </a>
                                <div class="content">
                                    <a class="author">{{comment.nickname}}</a>
                                    <div class="metadata">
                                        <span class="date">发帖时间{{comment.createTime}}</span>
                                    </div>
                                    <div class="text">
                                        <p>{{comment.content}}</p>
                                    </div>
                                    <div class="actions">
                                        <a class="reply" href="#elInput1" @click="replyComment(comment)" >回复</a>
                                    </div>
                                </div>
                                <div class="comments" >
                                    <div class="comment" v-for="reply of comment.replyList" v-if="reply!=null">
                                        <a class="avatar">
                                            <img :src="reply.avatar">
                                        </a>
                                        <div class="content">
                                            <a class="author">{{reply.nickname}}</a>
                                            <div class="metadata">
                                                <span class="date">回复时间: {{reply.createTime}}</span>
                                            </div>
                                            <div class="text">
                                                <span v-if="reply.parent!=null" style="color: dodgerblue">@{{reply.parent.nickname}}:</span><span>&nbsp{{reply.content}}</span>
                                            </div>
                                            <div class="actions">
                                                <a class="reply" href="#elInput1" @click="replyComment(reply)" >回复</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div >

                </div>
            </div>
        </div>
    </div>
    <!-- 左小工具条 -->
    <div class="ui vertical icon buttons m-fixed left-top" >
        <!-- 目录 -->
        <button id="cateBut" type="button" class="ui teal button">目录</button>
    </div>
    <div class="ui vertical icon buttons m-fixed left-bottom" >
        <!-- 滑动到留言区 -->
        <a href="#comment-container" type="button" class="ui teal button">留言</a>
        <!-- 生成二维码 -->
        <button class="ui icon button"><i class="hand point right outline icon"></i></button>
    </div>
    <!-- 生成的目录 -->
    <div id="cate" class="ui flowing popup transition hidden">
        <ol class="js-toc">
        </ol>
    </div>
    <!-- 右小工具条 -->
    <div class="ui right floated vertical icon buttons m-fixed right-bottom">
        <!-- 滑动到顶部 -->
        <div id="toTopBut" type="button" class="ui teal basic icon button"><i class="angle double up icon"></i></div>
    </div>
    <!-- 页脚 -->
    <footer class="ui inverted vertical segment" style="padding-top: 50px;margin-top: 100px">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="item">
                        <img src="../image/mybibi.jpg" class="ui rounded image" style="width: 120px">
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header" style="opacity: 0.8">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#"class="item">用户故事（User Story）</a>
                        <a href="#"class="item">来自未来的你</a>
                        <a href="#"class="item">fate/zero</a>
                    </div>
                </div>
                <div class="three wide column">
                    <h4 class="ui inverted header" style="opacity: 0.8">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#"class="item">转生成为魔剑那件事</a>
                        <a href="#"class="item">人生初体验</a>
                        <a href="#"class="item">学生故事（Student Story）</a>
                    </div>
                </div>
                <div class="seven wide column" style="opacity: 0.8">
                    <h4 class="ui inverted header">最新博客</h4>
                    <p>鄙人个人博客，仅有于非商业用途，为人民服务是我的职责（分享，程序，开发），来自一只可爱的程序猿</p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p style="letter-spacing: 2px;opacity: 0.8" >Copyright # 2022-2023 Lirenmi Designed by Lirenmi</p>
            <div class="" style="height: 50px"></div>
        </div>
    </footer>

</div>
</body>
    <!-- axios -->
    <script src="../frame/axios/axios.min.js"></script>
<script>

    Vue.config.productionTip=false  //以阻止 vue 在启动时生成生产提示。 <!-- 全局配置 -->
    new Vue({
        el:'#app',
        data:{
            //登录信息(留言时登录)
            visitor: {
                id: null,
                username: '未登录',
                password: '',
                email: '',
                avatar: 'https://img.gejiba.com/images/6fdc934e8cb5aa040764d0ff5b287d00.webp',
                createTime: ''
            },
            searchInput: {
                query: '',
                currentPage: 0,
                pageSize: 5,
            },
            //发帖提交信息
            form: {
                textarea: '',
                placeholder: '请输入帖子内容',
                parentId: null
            },
            //发帖规则
            rules: {
                textarea: [
                    {required: true, message: '此内容不能为空', trigger: 'blur'},
                ],
            },
            //评论信息
            comments: [],
            //获取的文章信息
            oneBlog:{
                id: null,
                title: '',
                content: '',
                firstPicture: '',
                flag: '',
                views: 0,
                appreciation: false,
                shareStatement: false,
                commentabled: false,
                published: false,
                recommend: false,
                createTime: null,
                updateTime: null,
                type: {},
                tagList: [],
                user: {},
            },
        },
        created(){
            this.gainBlog();
            this.gainComments();
            this.gainVisiter();
        },
        methods:{
            //发贴
            saveComment(){
                if(this.visitor.username=='未登录'){
                    this.$message('请先登录');
                }else{
                    axios({
                        method: "POST",
                        url: "/other/saveComment/"+this.oneBlog.id+"/"+this.form.parentId,
                        data: {
                            nickname: this.visitor.username,
                            email: this.visitor.email,
                            avatar: this.visitor.avatar,
                            createTime: this.visitor.createTime,
                            content: this.form.textarea,
                        }
                    }).then((res)=>{
                        if(res.data==false){
                            this.$message('添加失败');
                        }else{
                            //this.$message('添加成功');
                        }
                    }).finally(()=>{
                        this.gainComments();
                    });
                    this.form.textarea='';
                }
            },
            //回复
            replyComment(comment){
                this.form.placeholder='@'+comment.nickname+':';
                this.form.parentId=comment.id;
            },
            //访客登录信息获取
            gainVisiter(){
                axios({
                    method: "GET",
                    url: "/visiter/gainData",
                }).then((res)=>{
                    if(res.data==''){

                    }else{
                        this.visitor=res.data;
                    }
                });
            },
            //注销访客
            logout(){
                axios({
                    method: "GET",
                    url: "/visiter/logout",
                }).then((res)=>{
                    location.reload();
                });
            },
            //搜索内容
            submitQuery(){
                axios({
                    method: "GET",
                    url: "/other/search",
                    params:{
                        query: this.searchInput.query  //搜索内容
                    },
                }).then((res)=>{
                    location.href = "search.html";
                });
            },
            //获取文章点击信息
            gainBlog(){
                axios({
                    method: "GET",
                    url: "/other/gainBlog",
                }).then((res)=>{
                    this.oneBlog=res.data;
                });
            },
            //获取评论信息
            gainComments(){
                axios({
                    method: "GET",
                    url: "/other/gainComments",
                }).then((res)=>{
                    this.comments=res.data;
                });
            },
        }
    });
</script>
</html>